<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题消消乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-image: url('background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2); /* 20%白色遮罩 = 80%背景可见 */
            z-index: -1;
        }

        h1 {
            color: #FF6B6B;
            font-size: 3.5rem;
            text-align: center;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 90%;
            max-width: 1000px;
            margin-bottom: 20px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #f35959;
        }

        .bubble-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
        }

        .bubble {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            text-align: center;
            padding: 5px;
            user-select: none;
            transition: transform 0.3s, opacity 0.5s;

            /* 3D立体效果 */
            box-shadow:
                inset 0 -8px 10px rgba(0, 0, 0, 0.2),
                inset 0 8px 10px rgba(255, 255, 255, 0.5),
                0 0 10px rgba(0, 0, 0, 0.1);
        }

        .bubble:hover {
            transform: scale(1.05);
        }

        .bubble.selected {
            transform: scale(1.1);
            box-shadow:
                inset 0 -8px 10px rgba(0, 0, 0, 0.2),
                inset 0 8px 10px rgba(255, 255, 255, 0.8),
                0 0 15px rgba(255, 255, 255, 0.7);
        }

        .bubble.matched {
            opacity: 0;
            pointer-events: none;
        }

        .completion-message {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            text-align: center;
        }

        .message-content {
            background-color: #FF6B6B;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            max-width: 80%;
        }

        .message-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .message-content p {
            font-size: 1.5rem;
            margin-bottom: 30px;
        }

        button {
            background-color: white;
            color: #FF6B6B;
            border: none;
            padding: 12px 25px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        button:hover {
            background-color: #FFE8E8;
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .bubble {
                width: 70px;
                height: 70px;
                font-size: 14px;
            }

            h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <h1>知识消消乐</h1>

    <div class="game-info">
        <div>已匹配: <span id="matched-count">0</span>/<span id="total-count">5</span></div>
        <div>用时: <span id="timer">0</span>秒</div>
    </div>

    <div class="bubble-container" id="bubble-container">
        <!-- 泡泡将通过JavaScript动态生成 -->
    </div>

    <div class="completion-message" id="completion-message">
        <div class="message-content">
            <h2>恭喜你挑战成功!</h2>
            <p>完成时间: <span id="completion-time">0</span>秒</p >
            <button id="restart-button">再玩一次</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 知识点数据 - 中文词与中文词配对
            const knowledgePairs = [
                { chinese: "赋敛愈重", english: "轻徭薄赋" },
                { chinese: "奴婢数量增加", english: "释放奴婢" },
                { chinese: "鲜卑等数连兵入塞杀略吏民", english: "允许北方各族内迁" },
                { chinese: "基层官吏冗余", english: "合并郡县裁减官员整顿吏治" },
                { chinese: "刑法弥深", english: "减轻刑罚" }
                 ];

            // 游戏状态变量
            let selectedBubbles = [];
            let matchedPairs = 0;
            let totalPairs = knowledgePairs.length;
            let startTime = null;
            let timerInterval = null;

            // 获取DOM元素
            const bubbleContainer = document.getElementById('bubble-container');
            const matchedCountElement = document.getElementById('matched-count');
            const totalCountElement = document.getElementById('total-count');
            const timerElement = document.getElementById('timer');
            const completionMessage = document.getElementById('completion-message');
            const completionTimeElement = document.getElementById('completion-time');
            const restartButton = document.getElementById('restart-button');

            // 设置总对数
            totalCountElement.textContent = totalPairs;

            // 生成随机颜色
            function getRandomColor() {
                const colors = [
                    '#FF6B6B', '#4ECDC4', '#FFD166', '#06D6A0',
                    '#118AB2', '#073B4C', '#EF476F', '#7209B7',
                    '#3A86FF', '#FB5607', '#8338EC', '#FF006E'
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }

            // 创建泡泡音效
            function createBubbleSound() {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);

                oscillator.type = 'sine';
                oscillator.frequency.value = 523.25; // C5音符

                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);

                oscillator.start(audioContext.currentTime);
                oscillator.stop(audioContext.currentTime + 0.5);
            }

            // 初始化游戏
            function initGame() {
                // 清空容器
                bubbleContainer.innerHTML = '';
                selectedBubbles = [];
                matchedPairs = 0;
                matchedCountElement.textContent = matchedPairs;

                // 停止之前的计时器
                if (timerInterval) {
                    clearInterval(timerInterval);
                }

                // 开始计时
                startTime = new Date();
                timerInterval = setInterval(updateTimer, 1000);

                // 创建所有知识点
                const allKnowledge = [];
                knowledgePairs.forEach(pair => {
                    allKnowledge.push({ text: pair.chinese, pairId: pair.chinese + pair.english, type: 'chinese' });
                    allKnowledge.push({ text: pair.english, pairId: pair.chinese + pair.english, type: 'english'});
                });

                // 随机排序知识点
                shuffleArray(allKnowledge);

                // 创建泡泡元素
                allKnowledge.forEach((item, index) => {
                    const bubble = document.createElement('div');
                    bubble.className = 'bubble';
                    bubble.textContent = item.text;
                    bubble.dataset.pairId = item.pairId;

                    console.log("item:", item);
                    // 设置随机背景色
                    // bubble.style.backgroundColor = getRandomColor();
                    if (item.type === 'chinese'){
                        bubble.style.color = 'white';
                        bubble.style.backgroundColor = '#d8bc9c';
                    }else if (item.type === 'english'){
                        bubble.style.color = '#6b6666';
                        bubble.style.backgroundColor = '#f35959';
                    }

                    // 添加点击事件
                    bubble.addEventListener('click', handleBubbleClick);

                    bubbleContainer.appendChild(bubble);
                });
            }

            // 数组随机排序
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            }

            // 处理泡泡点击
            function handleBubbleClick(event) {
                const bubble = event.currentTarget;

                // 如果泡泡已经匹配或已选中，则忽略点击
                if (bubble.classList.contains('matched') || bubble.classList.contains('selected')) {
                    return;
                }

                // 播放泡泡音效
                createBubbleSound();

                // 添加选中样式
                bubble.classList.add('selected');

                // 添加到已选泡泡列表
                selectedBubbles.push(bubble);

                // 如果选中了两个泡泡
                if (selectedBubbles.length === 2) {
                    const bubble1 = selectedBubbles[0];
                    const bubble2 = selectedBubbles[1];

                    // 检查是否匹配
                    if (bubble1.dataset.pairId === bubble2.dataset.pairId) {
                        // 匹配成功
                        setTimeout(() => {
                            bubble1.classList.add('matched');
                            bubble2.classList.add('matched');
                            selectedBubbles = [];

                            matchedPairs++;
                            matchedCountElement.textContent = matchedPairs;

                            // 检查游戏是否完成
                            if (matchedPairs === totalPairs) {
                                endGame();
                            }
                        }, 500);
                    } else {
                        // 不匹配
                        setTimeout(() => {
                            bubble1.classList.remove('selected');
                            bubble2.classList.remove('selected');
                            selectedBubbles = [];
                        }, 1000);
                    }
                }
            }

            // 更新计时器
            function updateTimer() {
                const currentTime = new Date();
                const elapsedTime = Math.floor((currentTime - startTime) / 1000);
                timerElement.textContent = elapsedTime;
            }

            // 结束游戏
            function endGame() {
                clearInterval(timerInterval);
                const currentTime = new Date();
                const elapsedTime = Math.floor((currentTime - startTime) / 1000);

                completionTimeElement.textContent = elapsedTime;
                completionMessage.style.display = 'flex';
            }

            // 重新开始游戏
            restartButton.addEventListener('click', function() {
                completionMessage.style.display = 'none';
                initGame();
            });

            // 初始化游戏
            initGame();
        });
    </script>
</body>
</html>
